import React from 'react'
//布局相关组件
import { Layout, Menu } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
//路由相关组件 注意：HashRouter只需要导入一次就行了
import { Route, Link,Switch} from 'react-router-dom'
//导入MovieList组件
import MovieList from './MovieList.jsx'
import MovieInfo from './MovieInfo.jsx'
export default class Movie extends React.Component {
    constructor() {
        super()
        this.state = {}
    }
    render() {
        return <Layout>
            <Sider width={200} className="site-layout-background">
                <Menu
                    mode="inline"
                    defaultSelectedKeys={window.location.hash.split("/")[2]}
                    style={{ height: '100%', borderRight: 0 }}
                >
                    <Menu.Item key="1"><Link to="/movie/in_theaters/1">正在热映</Link></Menu.Item>
                    <Menu.Item key="2"><Link to="/movie/coming_soon/1">即将上映</Link></Menu.Item>
                    <Menu.Item key="3"><Link to="/movie/top250/1">Top250</Link></Menu.Item>
                </Menu>
            </Sider>
            <Layout style={{ paddingLeft: '1px' }}>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 10,
                        margin: 0,
                        minHeight: 768,
                    }}
                >
                    <Switch>
                        <Route path="/movie/detail/:id" component={MovieInfo}></Route>
                        <Route path="/movie/:type/:page" component={MovieList}></Route>

                    </Switch>
                </Content>
            </Layout>
        </Layout >
    }
}